@page
@{ Layout = "_LayoutApp"; }

@section Styles{
    <style>
        .el-input__inner {
            border-radius: 0;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 2px;
            background: none;
        }

        .el-radio {
            white-space: normal;
        }

        .el-checkbox__label {
            display: inline-grid;
            word-wrap: break-word;
            line-height: 20px;
            white-space: pre-line;
        }

        body {
            margin: 0;
            padding: 0;
        }
    </style>
}
<el-card class="mb-3 sticky-top">
    <div class="row">
        <div class="col-4">
            <div class="d-flex flex-column border-end border-bottom border-bottom-0 gap-1 p-3">
                <h3 class="mb-0">{{ item.rightCount }}</h3>
                <span class="fw-medium text-success">正 确</span>
            </div>
        </div>
        <div class="col-4">
            <div class="d-flex flex-column border-end border-bottom border-bottom-0 gap-1 p-3">
                <h3 class="mb-0">{{ item.answerCount-item.rightCount }}</h3>
                <span class="fw-medium text-danger">错误</span>
            </div>
        </div>
        <div class="col-4">
            <div class="d-flex flex-column gap-1 p-3">
                <h3 class="mb-0 text-success">{{ utils.formatPercentFloat(item.rightCount,item.answerCount) }}%</h3>
                <span class="fw-medium">正确率</span>
            </div>
        </div>
    </div>
</el-card>
<div class="p-3">
    <div class="mb-3" v-for="(tm,tmIndex) in tmList">
        <el-card class="position-relative" shadow="never">
            <div class="position-absolute top-0 start-0 fw-bold fst-italic" :class="tm.answerInfo.isRight?'text-success':'text-danger'">{{ tmIndex+1 }}、</div>
            <div v-if="tm.baseTx==='Zuheti'" :id="'tmid_'+tm.id">
                <div class="mb-3 fw-bold">
                    <el-card>
                        <div v-html="tm.titleHtml"></div>
                    </el-card>
                </div>
                <div v-for="(small,smallIndex) in tm.smallLists">
                    <div class="mt-3">
                        <div class="fw-light">第<span class="px-1">{{ (smallIndex+1) }}</span>小题（<span>{{ small.txName }}</span>）</div>
                        <div v-if="small.baseTx==='Tiankongti'">
                            <span v-if="small.titleList && small.titleList.length>0">
                                <span v-for="tmContent in small.titleList">
                                    <span v-if="utils.contains(tmContent.value,'___')">
                                        <el-input v-model.trim="small.answerInfo.optionsValues[tmContent.key]" style="width:130px;"></el-input>
                                    </span>
                                    <span v-else v-html="tmContent.value"></span>
                                </span>
                            </span>
                            <div v-else v-html="small.titleHtml"></div>
                        </div>
                        <div v-else v-html="small.titleHtml"></div>
                    </div>
                    <div class="list-group" v-if="small.baseTx!=='Tiankongti'">
                        <div v-if="small.baseTx==='Danxuanti' || small.baseTx==='Panduanti'">
                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in small.optionsRandom">
                                <div class="d-flex justify-content-start align-items-start">
                                    <div class="me-1 position-relative">
                                        {{optionsABC[optionIndex]}}.
                                    </div>
                                    <div>
                                        <el-radio :label="option.key" v-model="small.answerInfo.answer">
                                            <span v-html="option.value"></span>
                                        </el-radio>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="small.baseTx==='Duoxuanti'">
                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in small.optionsRandom">
                                <div class="d-flex justify-content-start align-items-start">
                                    <div class="me-1 position-relative">
                                        {{optionsABC[optionIndex]}}.
                                    </div>
                                    <div>
                                        <el-checkbox :true-label="option.key" false-label="" v-model="small.answerInfo.optionsValues[optionsABC.indexOf(option.key)]">
                                            <span v-html="option.value"></span>
                                        </el-checkbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="tm.baseTx==='Jiandati'">
                            <el-input :key="tm.id" type="textarea" resize="none" v-model.trim="small.answerInfo.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                                      show-word-limit></el-input>
                        </div>
                        <div v-else>
                            未知题型
                        </div>
                    </div>
                    <div class="p-3 my-3 bg-danger text-white" v-if="!small.isRight">
                        <div class="mt-2">我的答案：{{ small.answerInfo.answer }}</div>
                        <div class="mt-2">标准答案：<span>{{ small.answer }}</span></div>
                        <div class="mt-2">解析：<span v-html="small.jiexi"></span></div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="mb-3 fw-bold" :id="'tmid_'+tm.id">
                    <div v-if="tm.baseTx==='Tiankongti'">
                        <span v-if="tm.titleList && tm.titleList.length>0">
                            <span v-for="tmContent in tm.titleList">
                                <span v-if="utils.contains(tmContent.value,'___')">
                                    <el-input v-model.trim="tm.answerInfo.optionsValues[tmContent.key]" style="width:130px;"></el-input>
                                </span>
                                <span v-else v-html="tmContent.value"></span>
                            </span>
                        </span>
                        <div v-else v-html="tm.titleHtml"></div>
                    </div>
                    <div v-else v-html="tm.titleHtml"></div>
                </div>
                <div class="list-group" v-if="tm.baseTx!=='Tiankongti'">
                    <div v-if="tm.baseTx==='Danxuanti' || tm.baseTx==='Panduanti'">
                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                            <div class="d-flex justify-content-start align-items-start">
                                <div class="me-1 position-relative">
                                    {{optionsABC[optionIndex]}}.
                                </div>
                                <div>
                                    <el-radio :label="option.key" v-model="tm.answerInfo.answer">
                                        <span v-html="option.value"></span>
                                    </el-radio>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="tm.baseTx==='Duoxuanti'">
                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                            <div class="d-flex justify-content-start align-items-start">
                                <div class="me-1 position-relative">
                                    {{optionsABC[optionIndex]}}.
                                </div>
                                <div>
                                    <el-checkbox :true-label="option.key" false-label="" v-model="tm.answerInfo.optionsValues[optionsABC.indexOf(option.key)]">
                                        <span v-html="option.value"></span>
                                    </el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="tm.baseTx==='Jiandati'">
                        <el-input :key="tm.id" type="textarea" resize="none" v-model.trim="tm.answerInfo.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                                  show-word-limit></el-input>
                    </div>
                    <div v-else>
                        未知题型
                    </div>
                </div>
                <div class="p-3 my-3 bg-danger text-white" v-if="!tm.answerInfo.isRight">
                    <div class="mt-2">我的答案：{{ tm.answerInfo.answer }}</div>
                    <div class="mt-2">标准答案：<span>{{ tm.answer }}</span></div>
                    <div class="mt-2">解析：<span v-html="tm.jiexi"></span></div>
                </div>
            </div>
        </el-card>
    </div>
</div>
<div class="py-8"></div>
<div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
    <el-button-group class="rounded-0">
        <el-button type="primary" class="rounded-pill" icon="el-icon-close" v-on:click="utils.closeLayerSelf">退出预览</el-button>
    </el-button-group>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examPracticeResultView.js" type="text/javascript"></script>
}